<template>
    <view class="login-container">
        <!-- 小程序图标 -->
        <image src="/static/logo.jpg" class="app-logo" />
        <!-- 用户头像 -->
        <image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="user-avatar" />
        <!-- 用户昵称 -->
        <view v-if="userInfo.nickName" class="user-nickname">{{ userInfo.nickName }}</view>
        <!-- 登录按钮 -->
        <button class="login-button" @click="handleWechatLogin">微信一键登录</button>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { doLogin } from '@/api/login/login';
// 用户信息
interface UserInfo {
    avatarUrl?: string;
    nickName?: string;
}

// 响应式数据
const userInfo = ref<UserInfo>({});

// 微信登录逻辑
const handleWechatLogin = async () => {
    try {
        // 1. 获取微信登录凭证
        const loginRes = await uni.login({ provider: 'weixin' });
        console.log("loginRes: ", loginRes)
        const { code } = loginRes;
        // 4. 将 code 和用户信息发送到后端进行登录
        const res = doLogin(code);
        if ((await res).code === 200) {
            uni.showToast({
                title: '登录成功',
                duration: 2000,
            });
            setTimeout(() => {
                // 跳转到首页或其他页面
                uni.switchTab({
                    url: '/pages/home/index',
                });
            }, 2500);
        } else {
            throw new Error('登录失败');
        }
    } catch (error) {
        uni.showToast({
            title: error.message || '登录失败',
            icon: 'none',
        });
    }
};

// 页面加载时检查是否已登录
onLoad(() => {
    const token = uni.getStorageSync('token');
    if (token) {
        uni.switchTab({
            url: '/pages/home/index',
        });
    }
});
</script>

<style scoped>
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 96vh;
    background: linear-gradient(135deg, #ffffff, #49b6ca);
    /* 渐变背景 */
    padding: 2vh 0;
}

.app-logo {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* 添加阴影 */
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 3px solid #fff;
    /* 白色边框 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* 添加阴影 */
}

.user-nickname {
    font-size: 18px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* 文字阴影 */
}

.login-button {
    background: linear-gradient(135deg, #49b6ca, #ffffff);
    /* 初始渐变背景 */
    border: none;
    border-radius: 5px;
    color: #ffffff;
    /* 初始字体颜色为白色 */
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    /* 过渡效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 初始阴影 */
}

.login-button:active {
    background: linear-gradient(135deg, #ffffff, #49b6ca);
    /* 点击时保持悬停时的背景渐变，或者您可以更改为其他样式 */
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 点击时变为内阴影，给人一种“按下”的感觉 */
    transform: scale(0.95);
    /* 点击时缩小效果 */
    color: #ffffff;
    /* 确保字体颜色在点击时仍然可见（虽然这里与悬停时相同，但明确写出以防万一） */
}

/* 不需要特别为:active状态设置样式，因为您只要求悬停和取消悬停的变化 */
</style>